<template>
    <div style="display: flex">    
        <!-- <h1>i m person</h1> -->
        <el-card class="box-card" style="flex: 1; margin-right: 10px;">
            <div>
                <h3>个人信息</h3>
            </div>
            <br>
            <el-form label-width="100px">
                <el-form-item label="管理员ID" >
                    <el-input v-model="tempform.adminId" auto-complete="off" :readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="管理员用户名">
                    <el-input v-model="tempform.adminUsername" auto-complete="off" :readonly="true"></el-input>
                </el-form-item>
                <el-form-item label="管理员昵称">
                    <el-input v-model="tempform.nickname" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="管理员头像">
                    <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8081/driftIsland/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload"
                        :on-error="handleAvatarError" 
                        :headers=ausortoken>
                        <img v-if="tempform.picUrl" :src="tempform.picUrl" class="avatar" style="border: 1px dashed gray;">
                        <i v-else class="el-icon-plus avatar-uploader-icon" style="border: 1px dashed gray;"></i>
                    </el-upload>
                </el-form-item>
                <!-- <el-form-item label="管理员用户名">
                    <el-input v-model="form.adminUsername" auto-complete="off"></el-input>
                </el-form-item> -->
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                    <el-button @click="cancel">取消</el-button>
                </el-form-item>

            </el-form>
        </el-card>
        <el-card class="box-card" style="flex: 1; margin-left: 10px;">
            <div>
                <h3>修改密码</h3>
            </div>
            <br>
            <el-form label-width="100px">
                <el-form-item label="原密码">
                    <el-input type="password" v-model="updatePwd.oldPwd" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="新密码">
                    <el-input type="password" v-model="updatePwd.newPwd" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input type="password" v-model="queRenPwd" auto-complete="off"></el-input>
                </el-form-item>
                <el-button type="primary" class="pwd-button" @click="onPwdSubmit">提交</el-button>
            </el-form>
        </el-card>
    </div>
</template>

<script>
// import { dataTool } from 'echarts';
import { getAdminInfo,updateAvatar,updateAdminInfo,updatePwd } from '../api';
export default{
    name:'Person',
    data(){
        return{
            ausortoken:{
                Authorization:''
            },
            updatePwd:{
                oldPwd:'',
                newPwd:''
            },
            queRenPwd:'',
            form:{
                adminId:'',
                adminUsername:'',
                nickname:'',
                picUrl:'',
                level:''
            },
            tempform:{
                adminId:'',
                adminUsername:'',
                nickname:'',
                picUrl:'',
                level:''
            }
            // getForm:''
        }
    },
    methods:{
        handleAvatarSuccess(res, file) {
            console.log('res',res);
            if(res.code == 200)
            this.$message.success("用户头像上传成功")
            this.tempform.picUrl = res.data
            console.log('newPicUrl',res.data)
            this.$forceUpdate()
        },
        beforeAvatarUpload(file) {
            // const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            // if (!isJPG) {
            //     this.$message.error('上传头像图片只能是 JPG 格式!');
            // }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        handleAvatarError(){
            this.$message.error("用户头像上传失败")
        },
        getToken(){
            this.ausortoken.Authorization = localStorage.getItem("token")
        },
        getDeatilInfo(){
            getAdminInfo().then(ret =>{
                console.log('admininfo',ret)
                this.form = ret.data.data
                this.tempform =JSON.parse(JSON.stringify(this.form))
            })
        },
        //更新用户信息
        onSubmit(){
            //更新头像
            updateAvatar(this.tempform.picUrl).then(ret =>{
                console.log('updateAvatar' , ret)
                if(ret.data.code == 200){
                    this.$message.success("用户头像更新成功")
                }else{
                    this.$message.error("用户头像更新失败")
                }
            })

            // 更新其他信息
            updateAdminInfo(this.tempform).then(ret =>{
                // console.log('updateAvatar' , ret)
                if(ret.data.code == 200){
                    this.$message.success("用户信息更新成功")
                }else{
                    this.$message.error("用户信息更新失败")
                }
            })

        },
        //取消修改用户信息
        cancel(){
            console.log("取消更新")
            this.tempform = JSON.parse(JSON.stringify(this.form))
            console.log("form",this.form)
            console.log("tempForm",this.tempform)
            this.$forceUpdate()
        },
        //提交修改密码
        onPwdSubmit(){
            //校验新密码和确认密码是否一致
            if(this.queRenPwd == this.updatePwd.newPwd){
                updatePwd(this.updatePwd).then(ret =>{
                    console.log("updatePwdRet",ret)
                    //修改密码成功，退出登录
                    if(ret.data.code == 200){
                        localStorage.removeItem("token")
                        this.$message.success("修改密码成功，身份信息已过期，请重新登录")
                        this.$router.push('/login')
                    }else{
                        //输出相关错误信息
                        this.$message.error(ret.data.data)
                    }
                })
            }else{
                this.$message.error("新密码与确认密码不一致")
            }
        }
    },
    mounted(){
        //在上传头像时加入Authorization头部
        this.getToken()
        //获取用户信息
        this.getDeatilInfo()
    }
}
</script>

<style lang="less" scoped>
  .text {
    font-size: 14px;
  }

  .item {
    padding: 18px 0;
  }

  .box-card {
    width: 500px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .pwd-button{
        margin-left: 50%;
        margin-top: 10px;
        // margin: 0 auto
        // margin-left: 106px;
    }
</style>